<template>
  <div>
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-form-item label="时间范围">
          <el-date-picker

            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="code">
          <el-button-group>
            <el-button size="small" @click="click1()">昨天</el-button>
            <el-button size="small" @click="click2()">近7天</el-button>
            <el-button size="small" @click="click3()">近30天</el-button>
          </el-button-group>
        </el-form-item>

        <el-row>
          <el-form-item prop="business" label="渠道" style="margin-left:30px">
            <el-select v-model="filters.t1" placeholder="渠道" style="width:215px">
              <el-option label="全部" value="0"></el-option>
              <el-option label="BBC" value="1"></el-option>
              <el-option label="天猫" value="2"></el-option>
              <el-option label="京东" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="business" label="商家">
            <el-select v-model="filters.t2" placeholder="商家" style="width:215px">
              <el-option label="录屏商家02" value="1"></el-option>
              <el-option label="录屏商家01" value="1"></el-option>
              <el-option label="测试商家" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="business" label="店铺">
            <el-select v-model="filters.t3" placeholder="店铺" style="width:215px">
              <el-option label="全部" value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="business" label="终端">
            <el-select v-model="filters.t4" placeholder="终端" style="width:215px">
              <el-option label="全部" value="0"></el-option>
              <el-option label="PC" value="1"></el-option>
              <el-option label="IOS" value="2"></el-option>
              <el-option label="Android" value="3"></el-option>
              <el-option label="H5" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="find()"
            />
          </el-form-item>
        </el-row>

      </el-form>
    </div>

    <!--border:1px solid #000000;-->
    <!--width:756px;height:500px;-->
    <!--style="background-color:#FFFFFF;margin:20px;"-->
    <!--<div style=background-color:#F0F3F4;height:800px;>-->
      <!--:class="[isActive?'change':'changs']"-->
      <!--<div  style="display:inline-block; vertical-align: top;"-->
           <!--@mouseleave="changeIt"-->
           <!--@mouseenter="changeIt" >-->
        <!--<div id="chart1" style=" border:1px solid #000000; vertical-align: top;"></div>-->
        <!--<div id="chart2" style=" border:1px solid #234323;vertical-align: top; " ></div>-->
      <!--</div>-->
      <!--<div style="display:inline-block;text-align:right; border:1px solid #000000;"-->
      <!--@mouseleave="changeIt"-->
      <!--@mouseenter="changeIt" >-->
      <!--<div id="chart2"></div>-->
      <!--</div>-->

    <!--</div>-->

    <!--<div :class="[isActive?'change':'changs']">-->
    <!--通过点击按钮此处样式会发生改变-->
    <!--</div>-->
    <!--<button @click="changeIt">点击改变</button>-->


    <div class="block-container">
      <div class="block-content">
          <div class="block-item-3" id="chart1" :class="[isActive?'change':'changs']" @mouseleave="changeIt()" @mouseenter="changeIt()"></div>
          <div class="block-item-3" id="chart2" :class="[isActive2?'change':'changs']" @mouseleave="changeIt2()" @mouseenter="changeIt2()"></div>
      </div>

      <div class="block-content">
        <div class="block-item-4" id="chart3" :class="[isActive3?'change':'changs']" @mouseleave="changeIt3()" @mouseenter="changeIt3()"></div>
        <div class="block-item-4" id="chart4" :class="[isActive4?'change':'changs']" @mouseleave="changeIt4()" @mouseenter="changeIt4()"></div>
      </div>

      <div class="block-content">
        <div class="block-item-5" id="chart5" :class="[isActive5?'change':'changs']" @mouseleave="changeIt5()" @mouseenter="changeIt5()"></div>
        <div class="block-item-5" id="chart6" :class="[isActive6?'change':'changs']" @mouseleave="changeIt6()" @mouseenter="changeIt6()"></div>
      </div>

      <div class="block-content">
        <div class="block-item-6">
            <el-tabs v-model="activeName" @tab-click="handleClick">

              <el-tab-pane label="报表" name="first" style="height: 400px;">
                <div style="float: left;">
                  <el-button type="primary" icon="el-icon-download"
                  >下载表格</el-button
                  >
                </div>
                <div style="margin:10px;border:0;padding:0;padding-top: 60px;height: 350px">
                  <el-table
                    :border="true"
                    :data="tableData2"
                    style="width: 100%"
                    :span-method="objectSpanMethod"
                    :cell-style="setCellStyle"
                  >
                    <el-table-column fixed prop="date" label="商家" width="180">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          @click="isShow"
                          :icon="iconUrl"
                          v-model="scope.row.standard"
                        >全平台</el-button
                        >
                      </template>
                    </el-table-column>
                    <el-table-column label="成交订单金额 ">
                      <el-table-column prop="date" label="平台名称">
                      </el-table-column>
                      <el-table-column prop="name" label="合计"> </el-table-column>
                      <el-table-column prop="name" label="占比"> </el-table-column>
                      <el-table-column prop="name" label="环比"> </el-table-column>
                      <el-table-column prop="name" label="同年比"> </el-table-column>
                    </el-table-column>
                    <el-table-column label="客单价  ">
                      <el-table-column prop="name" label="合计"> </el-table-column>
                      <el-table-column prop="name" label="占比"> </el-table-column>
                      <el-table-column prop="name" label="环比"> </el-table-column>
                      <el-table-column prop="name" label="同年比"> </el-table-column>
                    </el-table-column>
                    <el-table-column label="成交订单数 ">
                      <el-table-column prop="name" label="合计"> </el-table-column>
                      <el-table-column prop="name" label="占比"> </el-table-column>
                      <el-table-column prop="name" label="环比"> </el-table-column>
                      <el-table-column prop="name" label="同年比"> </el-table-column>
                    </el-table-column>
                    <el-table-column label="成交转化率  ">
                      <el-table-column prop="name" label="合计"> </el-table-column>
                      <el-table-column prop="name" label="占比"> </el-table-column>
                      <el-table-column prop="name" label="环比"> </el-table-column>
                      <el-table-column prop="name" label="同年比"> </el-table-column>
                    </el-table-column>
                    <el-table-column label="PV  ">
                      <el-table-column prop="name" label="合计"> </el-table-column>
                      <el-table-column prop="name" label="占比"> </el-table-column>
                      <el-table-column prop="name" label="环比"> </el-table-column>
                      <el-table-column prop="name" label="同年比"> </el-table-column>
                    </el-table-column>
                    <el-table-column label="UV  ">
                      <el-table-column prop="name" label="合计"> </el-table-column>
                      <el-table-column prop="name" label="占比"> </el-table-column>
                      <el-table-column prop="name" label="环比"> </el-table-column>
                      <el-table-column prop="name" label="同年比"> </el-table-column>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>



              <el-tab-pane label="趋势图" name="second">
                <div style="float:left">
                  <el-checkbox
                    v-model="allCheckedSource"
                    label="全渠道"
                    @change="isChangeChecked"
                  >全渠道</el-checkbox
                  >
                </div>
                <div style="float:left; padding-left: 20px;">
                  <el-checkbox-group
                    v-model="checkedSource"
                    @change="handleCheckdSourceChange"
                  >
                    <el-checkbox v-for="item in sources" :label="item" :key="item">{{
                      item
                      }}</el-checkbox>
                  </el-checkbox-group>
                </div>

                <div style="padding-top: 40px;">
                  <el-row>
                    <el-col :span="24">
                      <div class="grid-content bg-purple" style="height: 40px;">

                        <el-checkbox-group
                          v-model="checkedType"
                          style="float:left; padding-top: 10px;"
                          :max="2"
                          @change="handleCheckdSourceTypeChange"
                        >
                          <el-checkbox
                            v-for="item in type"
                            :label="item"
                            :key="item"
                          >{{ item }}</el-checkbox
                          >
                        </el-checkbox-group>


                        <div class="11111" style="float:left;padding-top: 10px;">
                          &nbsp&nbsp&nbsp&nbsp&nbsp|&nbsp&nbsp&nbsp&nbsp
                          <el-checkbox
                            :disabled="true"
                            :checked="true"
                            v-model="turnoverRate"
                          >直接访问占比 </el-checkbox
                          >
                        </div>
                        <div class="11111" style="float:left;padding-top: 10px;">
                          <el-checkbox
                            :disabled="true"
                            :checked="true"
                            value="false"
                          > 二跳率 </el-checkbox
                          >
                        </div>

                      </div>
                    </el-col>
                  </el-row>
                </div>

                <div style="margin:10px;border:0;padding:0;">
                  <el-row>

                    <!--全渠道-->
                    <div v-show="allsourceOrderMoneyShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            全渠道商详页UV
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0.62</div>
                        </div>
                      </el-col>
                    </div>

                    <div v-show="allsourceKeDanPriceShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            全渠道购物车UV
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0.62</div>
                        </div>
                      </el-col>
                    </div>
                    <div v-show="allsourceOrderNumShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            全渠道成交订单数
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0.62</div>
                        </div>
                      </el-col>
                    </div>
                    <div v-show="allsourcePvShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            全渠道PV
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0.62</div>
                        </div>
                      </el-col>
                    </div>
                    <div v-show="allsourceUvShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            全渠道UV
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0.62</div>
                        </div>
                      </el-col>
                    </div>


                    <!--BBC-->
                    <div v-show="bbcOrderMoneyShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            BBC商详页UV
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0</div>
                        </div>
                      </el-col>
                    </div>
                    <div v-show="bbcKeDanPriceShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            BBC购物车UV
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0</div>
                        </div>
                      </el-col>
                    </div>
                    <div v-show="bbcOrderNumShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            BBC成交订单数
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0</div>
                        </div>
                      </el-col>
                    </div>
                    <div v-show="bbcPvShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            BBC PV
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0</div>
                        </div>
                      </el-col>
                    </div>
                    <div v-show="bbcUvShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            BBC UV
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0</div>
                        </div>
                      </el-col>
                    </div>


                    <!--天猫-->
                    <div v-show="tianMaoOrderMoneyShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            天猫商详页UV
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0</div>
                        </div>
                      </el-col>
                    </div>

                    <div v-show="tianMaoKeDanPriceShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            天猫购物车UV
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0</div>
                        </div>
                      </el-col>
                    </div>
                    <div v-show="tianMaoOrderNumShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            天猫成交订单数
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0</div>
                        </div>
                      </el-col>
                    </div>
                    <div v-show="tianMaoPvShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            天猫 PV
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0</div>
                        </div>
                      </el-col>
                    </div>
                    <div v-show="tianMaoUvShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            天猫 UV
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0</div>
                        </div>
                      </el-col>
                    </div>


                    <!--京东-->
                    <div v-show="jingDongOrderMoneyShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            京东商详页UV
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0</div>
                        </div>
                      </el-col>
                    </div>

                    <div v-show="jingDongKeDanPriceShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            京东购物车UV
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0</div>
                        </div>
                      </el-col>
                    </div>
                    <div v-show="jingDongOrderNumShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            京东成交订单数
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0</div>
                        </div>
                      </el-col>
                    </div>
                    <div v-show="jingDongPvShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            京东 PV
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0</div>
                        </div>
                      </el-col>
                    </div>
                    <div v-show="jingDongUvShow">
                      <el-col :span="4">
                        <div
                          class="grid-content bg-purple1"
                          :style="{ width: '200px', height: '100px' }"
                        >
                          <p class style="font-size: 16px;font-weight: bold;">
                            京东 UV
                          </p>
                          <br />
                          <div style=" color: #42A5F5;">0</div>
                        </div>
                      </el-col>
                    </div>
                  </el-row>
                </div>
                <div style="margin:10px;border:0;padding:0;margin-left:-65px;">
                  <el-row>
                    <el-col :span="24">
                      <div
                        id="myCharts7"
                        class="grid-content bg-purple1"
                        :style="{ width: '1680px', height: '400px' }"
                      ></div>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>


            </el-tabs>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  import PopupTreeInput from "@/components/PopupTreeInput";
  import CyTable from "@/views/Core/CyTable";
  import KtButton from "@/views/Core/KtButton";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import { format } from "@/utils/datetime";
  import utils from "@/assets/js/utils.js";
  let echarts = require("echarts/lib/echarts");
  const sourceOptions = ["BBC", "天猫", "京东"];
  const typeOptions = ["商详页UV", "购物车UV", "成交订单数", "PV", "UV"];
  var symbolSize = 20;
  var points = [];

  export default {
    components: {
      PopupTreeInput,
      CyTable,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {

        jingDongOrderMoneyShow: false,
        jingDongKeDanPriceShow: false,
        jingDongOrderNumShow: false,
        jingDongPvShow: false,
        jingDongUvShow: false,
        tianMaoOrderMoneyShow: false,
        tianMaoKeDanPriceShow: false,
        tianMaoOrderNumShow: false,
        tianMaoPvShow: false,
        tianMaoUvShow: false,
        bbcOrderMoneyShow: false,
        bbcKeDanPriceShow: false,
        bbcOrderNumShow: false,
        bbcPvShow: false,
        bbcUvShow: false,
        allsourceOrderMoneyShow: true,
        allsourceKeDanPriceShow: true,
        allsourceOrderNumShow: false,
        allsourcePvShow: false,
        allsourceUvShow: false,
        isChange: true,
        imgUrl: "/static/table.png",
        checked: "",
        allsourceShow: true,
        jingdongShow: false,
        tianmaoShow: false,
        bbcShow: false,
        turnoverRate: "", //直接访问占比 
        checkedSource: [],
        allCheckedSource: true,
        sources: sourceOptions,
        checkedType: ["商详页UV", "购物车UV"],
        type: typeOptions,
        sourceOptions: [
          { key: 0, vwlue: "BBC" },
          { key: 1, vwlue: "天猫" },
          { key: 2, vwlue: "京东" }
        ],



        activeName: "first",
        totalSize: 0,
        content: [],
        // 分页信息
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        },
        iconUrl: "el-icon-plus",
        tableData2: [
          {
            date: "合计",
            name: "2300",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
          },
          {
            date: "BBC",
            name: "2300",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
          },
          {
            date: "天猫",
            name: "0",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
          },
          {
            date: "京东",
            name: "0",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333
          }
        ],
        tableData: [{
          date: '2016-05-03',
          name: '0',
          province: '0',
          city: '0',
          address: '0',
          zip: 0,
          t1:0,
          t2:0,
          t3:0,
          t4:0
        }, {
          date: '2016-05-02',
          name: '0',
          province: '0',
          city: '0',
          address: '0',
          zip: 0,
          t1:0,
          t2:0,
          t3:0,
          t4:0
        }, {
          date: '2016-05-04',
          name: '0',
          province: '0',
          city: '0',
          address: '0',
          zip: 0,
          t1:0,
          t2:0,
          t3:0,
          t4:0
        }, {
          date: '2016-05-01',
          name: '0',
          province: '0',
          city: '0',
          address: '0',
          zip: 0,
          t1:0,
          t2:0,
          t3:0,
          t4:0
        }, {
          date: '2016-05-08',
          name: '0',
          province: '0',
          city: '0',
          address: '0',
          zip: 0,
          t1:0,
          t2:0,
          t3:0,
          t4:0
        }, {
          date: '2019-12-25',
          name: '0',
          province: '0',
          city: '0',
          address: '0',
          zip: 0,
          t1:0,
          t2:0,
          t3:0,
          t4:0
        }, {
          date: '2016-05-07',
          name: '0',
          province: '0',
          city: '0',
          address: '0',
          zip: 0,
          t1:0,
          t2:0,
          t3:0,
          t4:0
        }],

        //--------------------------------------------------

        isActive: true,
        isActive2:true,
        isActive3: true,
        isActive4:true,
        isActive5: true,
        isActive6:true,
        size: "small",
        filters: {
          code:""
        },
        mychartdata: ['BBC', '天猫', '京东'],
        mycharseriesdata: [{value: 335, name: 'BBC'}, {value: 335, name: '天猫'}, {value: 335, name: '京东'}]
      }
    },
    methods: {
      setCellStyle: function(row, column, rowIndex, columnIndex) {
        return "padding:0;height:60px;";
      },
      handleClick: function(data) {},
      handleCheckdSourceTypeChange: function(data) {
        let this_ = this;
        this_.allsourceOrderMoneyShow = false;
        this_.allsourceKeDanPriceShow = false;
        this_.allsourceOrderNumShow = false;
        this_.allsourcePvShow = false;
        this_.allsourceUvShow = false;
        if (this_.checkedSource.length == 0 && this_.allCheckedSource) {
          $.each(this_.checkedType, function(index, val) {
            if (val == "商详页UV") {
              this_.allsourceOrderMoneyShow = true;
            }
            if (val == "购物车UV") {
              this_.allsourceKeDanPriceShow = true;
            }
            if (val == "成交订单数") {
              this_.allsourceOrderNumShow = true;
            }
            if (val == "PV") {
              this_.allsourcePvShow = true;
            }
            if (val == "UV") {
              this_.allsourceUvShow = true;
            }
          });
        } else {
          this_.allsourceOrderMoneyShow = false;
          this_.allsourceKeDanPriceShow = false;
          this_.allsourceOrderNumShow = false;
          this_.allsourcePvShow = false;
          this_.allsourceUvShow = false;
          this_.jingDongOrderMoneyShow = false;
          this_.jingDongKeDanPriceShow = false;
          this_.jingDongOrderNumShow = false;
          this_.jingDongPvShow = false;
          this_.jingDongUvShow = false;
          this_.tianMaoOrderMoneyShow = false;
          this_.tianMaoKeDanPriceShow = false;
          this_.tianMaoOrderNumShow = false;
          this_.tianMaoPvShow = false;
          this_.tianMaoUvShow = false;
          this_.bbcOrderMoneyShow = false;
          this_.bbcKeDanPriceShow = false;
          this_.bbcOrderNumShow = false;
          this_.bbcPvShow = false;
          this_.bbcUvShow = false;
          $.each(this.checkedSource, function(index, val) {
            if (val == "BBC") {
              $.each(this_.checkedType, function(index, val) {
                if (val == "商详页UV") {
                  this_.bbcOrderMoneyShow = true;
                }
                if (val == "购物车UV") {
                  this_.bbcKeDanPriceShow = true;
                }
                if (val == "成交订单数") {
                  this_.bbcOrderNumShow = true;
                }
                if (val == "PV") {
                  this_.bbcPvShow = true;
                }
                if (val == "UV") {
                  this_.bbcUvShow = true;
                }
              });
            }
            if (val == "天猫") {
              $.each(this_.checkedType, function(index, val) {
                if (val == "商详页UV") {
                  this_.tianMaoOrderMoneyShow = true;
                }
                if (val == "购物车UV") {
                  this_.tianMaoKeDanPriceShow = true;
                }
                if (val == "成交订单数") {
                  this_.tianMaoOrderNumShow = true;
                }
                if (val == "PV") {
                  this_.tianMaoPvShow = true;
                }
                if (val == "UV") {
                  this_.tianMaoUvShow = true;
                }
              });
            }
            if (val == "京东") {
              $.each(this_.checkedType, function(index, val) {
                if (val == "商详页UV") {
                  this_.jingDongOrderMoneyShow = true;
                }
                if (val == "购物车UV") {
                  this_.jingDongKeDanPriceShow = true;
                }
                if (val == "成交订单数") {
                  this_.jingDongOrderNumShow = true;
                }
                if (val == "PV") {
                  this_.jingDongPvShow = true;
                }
                if (val == "UV") {
                  this_.tianMaoUvShow = true;
                }
              });
            }
          });
        }
      },
      isChangeChecked: function(data) {

        console.log("绑定值变化-------start");
        console.log(data);
        console.log("绑定值变化-------end");


        let this_ = this;
        if (data) {
          this_.checkedSource = [];
          this_.allCheckedSource = true;
          this_.allsourceOrderMoneyShow = false;
          this_.allsourceKeDanPriceShow = false;
          this_.allsourceOrderNumShow = false;
          this_.allsourcePvShow = false;
          this_.allsourceUvShow = false;
          this_.jingDongOrderMoneyShow = false;
          this_.jingDongKeDanPriceShow = false;
          this_.jingDongOrderNumShow = false;
          this_.jingDongPvShow = false;
          this_.jingDongUvShow = false;
          this_.tianMaoOrderMoneyShow = false;
          this_.tianMaoKeDanPriceShow = false;
          this_.tianMaoOrderNumShow = false;
          this_.tianMaoPvShow = false;
          this_.tianMaoUvShow = false;
          this_.bbcOrderMoneyShow = false;
          this_.bbcKeDanPriceShow = false;
          this_.bbcOrderNumShow = false;
          this_.bbcPvShow = false;
          this_.bbcUvShow = false;
          $.each(this_.checkedType, function(index, val) {
            if (val == "商详页UV") {
              this_.allsourceOrderMoneyShow = true;
            }
            if (val == "购物车UV") {
              this_.allsourceKeDanPriceShow = true;
            }
            if (val == "成交订单数") {
              this_.allsourceOrderNumShow = true;
            }
            if (val == "PV") {
              this_.allsourcePvShow = true;
            }
            if (val == "UV") {
              this_.allsourceUvShow = true;
            }
          });
        } else {
          this_.allCheckedSource = false;

          this_.allsourceOrderMoneyShow = false;
          this_.allsourceKeDanPriceShow = false;
          this_.allsourceOrderNumShow = false;
          this_.allsourcePvShow = false;
          this_.allsourceUvShow = false;
        }
      },
      handleCheckdSourceChange: function(data) {
        let this_ = this;
        this_.checkedSource = [];
        if (data.length != 0) {
          //勾选了BBC和天猫和京东其中任意
          this_.jingDongOrderMoneyShow = false;
          this_.jingDongKeDanPriceShow = false;
          this_.jingDongOrderNumShow = false;
          this_.jingDongPvShow = false;
          this_.jingDongUvShow = false;
          this_.tianMaoOrderMoneyShow = false;
          this_.tianMaoKeDanPriceShow = false;
          this_.tianMaoOrderNumShow = false;
          this_.tianMaoPvShow = false;
          this_.tianMaoUvShow = false;
          this_.bbcOrderMoneyShow = false;
          this_.bbcKeDanPriceShow = false;
          this_.bbcOrderNumShow = false;
          this_.bbcPvShow = false;
          this_.bbcUvShow = false;
          this_.allsourceOrderMoneyShow = false;
          this_.allsourceKeDanPriceShow = false;
          this_.allsourceOrderNumShow = false;
          this_.allsourcePvShow = false;
          this_.allsourceUvShow = false;
          this_.allCheckedSource = false;
          console.log(this_.allCheckedSource);
          $.each(data, function(index, val) {
            if (val == "BBC") {
              $.each(this_.checkedType, function(index, val) {
                if (val == "商详页UV") {
                  this_.bbcOrderMoneyShow = true;
                }
                if (val == "购物车UV") {
                  this_.bbcKeDanPriceShow = true;
                }
                if (val == "成交订单数") {
                  this_.bbcOrderNumShow = true;
                }
                if (val == "PV") {
                  this_.bbcPvShow = true;
                }
                if (val == "UV") {
                  this_.bbcUvShow = true;
                }
              });
              this_.checkedSource.push(val);
            }
            if (val == "天猫") {
              $.each(this_.checkedType, function(index, val) {
                if (val == "商详页UV") {
                  this_.tianMaoOrderMoneyShow = true;
                }
                if (val == "购物车UV") {
                  this_.tianMaoKeDanPriceShow = true;
                }
                if (val == "成交订单数") {
                  this_.tianMaoOrderNumShow = true;
                }
                if (val == "PV") {
                  this_.tianMaoPvShow = true;
                }
                if (val == "UV") {
                  this_.tianMaoUvShow = true;
                }
              });
              this_.checkedSource.push(val);
            }
            if (val == "京东") {
              $.each(this_.checkedType, function(index, val) {
                if (val == "商详页UV") {
                  this_.jingDongOrderMoneyShow = true;
                }
                if (val == "购物车UV") {
                  this_.jingDongKeDanPriceShow = true;
                }
                if (val == "成交订单数") {
                  this_.jingDongOrderNumShow = true;
                }
                if (val == "PV") {
                  this_.jingDongPvShow = true;
                }
                if (val == "UV") {
                  this_.tianMaoUvShow = true;
                }
              });
              this_.checkedSource.push(val);
            }
          });
        } else {
          this_.jingDongOrderMoneyShow = false;
          this_.jingDongKeDanPriceShow = false;
          this_.jingDongOrderNumShow = false;
          this_.jingDongPvShow = false;
          this_.jingDongUvShow = false;
          this_.tianMaoOrderMoneyShow = false;
          this_.tianMaoKeDanPriceShow = false;
          this_.tianMaoOrderNumShow = false;
          this_.tianMaoPvShow = false;
          this_.tianMaoUvShow = false;
          this_.bbcOrderMoneyShow = false;
          this_.bbcKeDanPriceShow = false;
          this_.bbcOrderNumShow = false;
          this_.bbcPvShow = false;
          this_.bbcUvShow = false;
        }
      },

      //--------------------------------------------------
      objectSpanMethod: function({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex === 0) {
            return {
              rowspan: 5,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },
      isShow: function() {
        if (this.iconUrl == "el-icon-plus") {
          this.iconUrl = "el-icon-minus";
        } else {
          this.iconUrl = "el-icon-plus";
        }
      },
      find:function () {
        this.$mychart.mycookie('chart1', this.mychartdata, this.mycharseriesdata, "PV 1,625");
        this.$mychart.mycookie('chart2', this.mychartdata, this.mycharseriesdata, "商详页UV 0");
        this.$mychart.mycookie2('chart3', this.mychartdata, this.mycharseriesdata, "购物车UV 0");
        this.$mychart.mycookie2('chart4', this.mychartdata, this.mycharseriesdata, "成交订单数 0");
        this.$mychart.mycookie('chart5', this.mychartdata, this.mycharseriesdata, "二跳率 0");
        this.$mychart.mycookie2('chart6', this.mychartdata, this.mycharseriesdata, "商详页转化率 0");
      },
      click1:function () {
        this.$mychart.mycookie('chart1', this.mychartdata, this.mycharseriesdata, "PV 2,625");
        this.$mychart.mycookie('chart2', this.mychartdata, this.mycharseriesdata, "商详页UV 2");
        this.$mychart.mycookie2('chart3', this.mychartdata, this.mycharseriesdata, "购物车UV 2");
        this.$mychart.mycookie2('chart4', this.mychartdata, this.mycharseriesdata, "成交订单数 2");
        this.$mychart.mycookie('chart5', this.mychartdata, this.mycharseriesdata, "二跳率 2");
        this.$mychart.mycookie2('chart6', this.mychartdata, this.mycharseriesdata, "商详页转化率 2");
      },
      click2:function () {
        this.$mychart.mycookie('chart1', this.mychartdata, this.mycharseriesdata, "PV 3,625");
        this.$mychart.mycookie('chart2', this.mychartdata, this.mycharseriesdata, "商详页UV 3");
        this.$mychart.mycookie2('chart3', this.mychartdata, this.mycharseriesdata, "购物车UV 3");
        this.$mychart.mycookie2('chart4', this.mychartdata, this.mycharseriesdata, "成交订单数 3");
        this.$mychart.mycookie('chart5', this.mychartdata, this.mycharseriesdata, "二跳率 3");
        this.$mychart.mycookie2('chart6', this.mychartdata, this.mycharseriesdata, "商详页转化率 3");
      },
      click3:function () {
        this.$mychart.mycookie('chart1', this.mychartdata, this.mycharseriesdata, "PV 4,625");
        this.$mychart.mycookie('chart2', this.mychartdata, this.mycharseriesdata, "商详页UV 4");
        this.$mychart.mycookie2('chart3', this.mychartdata, this.mycharseriesdata, "购物车UV 4");
        this.$mychart.mycookie2('chart4', this.mychartdata, this.mycharseriesdata, "成交订单数 4");
        this.$mychart.mycookie('chart5', this.mychartdata, this.mycharseriesdata, "二跳率 4.5");
        this.$mychart.mycookie2('chart6', this.mychartdata, this.mycharseriesdata, "商详页转化率 4.8");
      },
      // 换页刷新
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        // this.init();
      },
      // 换页刷新
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.pageRequest.pageNum = 1;
        // this.init();
      },
      mouseEnter: function () {
        var dvObj = document.getElementById("div1");

        console.log("11--------------------");
        console.log(dvObj);

        dvObj.style.border = "background-color:#000000;";
      },
      changeIt: function () {
        this.isActive = !this.isActive;
      },
      changeIt2: function () {
        this.isActive2 = !this.isActive2;
      },
      changeIt3: function () {
        this.isActive3 = !this.isActive3;
      },
      changeIt4: function () {
        this.isActive4 = !this.isActive4;
      },
      changeIt5: function () {
        this.isActive5 = !this.isActive5;
      },
      changeIt6: function () {
        this.isActive6 = !this.isActive6;
      },

      drawBar() {
        // 基于dom，初始化echarts实例
        let myCharts7 = echarts.init(document.getElementById("myCharts7"));


        //经营树状图分析
        myCharts7.setOption({
          tooltip: {},
          xAxis: {
            type: "category",
            axisLine: { onZero: false },
            data: [
              "2019-12-20",
              "2019-12-21",
              "2019-12-22",
              "2019-12-23",
              "2019-12-24",
              "2019-12-25",
              "2019-12-26"
            ]
          },
          yAxis: {
            min: 0,
            max: 1,
            type: "value",
            axisLine: { onZero: false }
          },
          series: [
            {
              id: "a",
              type: "line",
              smooth: true,
              symbolSize: symbolSize,
              data: [0, 0, 0, 0, 0, 0.16, 0.62]
            }
          ]
        });
      }
    },
    mounted() {
      this.$mychart.mycookie('chart1', this.mychartdata, this.mycharseriesdata, "PV 1,625");
      this.$mychart.mycookie('chart2', this.mychartdata, this.mycharseriesdata, "商详页UV 0");
      this.$mychart.mycookie2('chart3', this.mychartdata, this.mycharseriesdata, "购物车UV 0");
      this.$mychart.mycookie2('chart4', this.mychartdata, this.mycharseriesdata, "成交订单数 0");
      this.$mychart.mycookie('chart5', this.mychartdata, this.mycharseriesdata, "二跳率 0");
      this.$mychart.mycookie2('chart6', this.mychartdata, this.mycharseriesdata, "商详页转化率 0");
      this.drawBar();
    }


  }
</script>

<style scoped>
  /*#chart1 {*/
    /*width: 300px;*/
    /*height: 300px;*/
  /*}*/
  .change {
    /*display:inline-block;*/
    /*text-align:left;*/
    /*background-color: #FFFFFF;*/
    /*margin: 10px;*/
  }

  .changs {
    /*display:inline-block;*/
    /*text-align:left;*/
    border: 1px solid #a6d9ff;
    /*background-color: #FFFFFF;*/
    /*margin: 10px;*/
  }



  .block-container {

    height: 1840px;
    /*width: 100%;*/
    background-color:#F0F3F4;
  }

  .block-title {
    text-align: center;
  }

  /* 父元素 */
  .block-content {
    font-size: 0;  /* 解决 inline-block 布局会出现多余间隙 */
    /*max-width: 1200px;*/
    margin: 0 auto;
  }

  .block-content .block-item-3,
  .block-content .block-item-4,
  .block-content .block-item-5,
  .block-content .block-item-6{
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    transition: all .4s ease;
    vertical-align: top; /* 设置顶部对齐 */
    font-size: 14px;
  }

  /* 3 列 */
  .block-content .block-item-3 {
    /*width: 45%;  !*  width: 32%;  *!*/
    /*border: 1px solid #333;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 48%;
    margin-top: 20px;
    margin-left: 2%;
    cursor: pointer;
  }

  /* 4 列 */
  .block-content .block-item-4 {
    /*width: 22%;   !* width: 23.5%; *!*/
    /*margin: 10px;  !*  margin-left: 2%;  *!*/
    /*border: 1px solid #333;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 48%;
    margin-top: 20px;
    margin-left: 2%;
    cursor: pointer;
  }

  /* 5 列 */
  .block-content .block-item-5 {
    /*width: 18%;*/
    /*margin: 10px;*/
    /*margin-left: 2.5%;*/
    /*border: 1px solid #333;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 48%;
    margin-top: 20px;
    margin-left: 2%;
    cursor: pointer;
  }

  /* 6 列 */
  .block-content .block-item-6 {
    /*margin: 10px;*/
    background: #ffffff;
    text-align: center;
    /*height: 450px;*/
    width: 98%;
    margin-top: 20px;
    margin-left: 2%;
    margin-bottom: 30px;
    cursor: pointer;
  }

  /* 首列左边距设为0 */
  .block-content .block-item-3:first-child,
  .block-content .block-item-4:first-child,
  .block-content .block-item-5:first-child,
  .block-content .block-item-6:first-child {
    margin-left: 0;
  }

</style>
